<template>
<view class="box-intergral-product">
	<view class="top">
		<view class="title">积分兑换</view>
		<view class="more">查看更过</view>
	</view>
	<view class="content">
		<view class="product" v-for="(product,index) in intergralProductList" :key="index">
			<image class="img" :src="product.imageUrl" mode="aspectFill"></image>
			<view class="info">
				<p class="name">{{product.name}}</p>
				<p class="intergral">{{product.intergral}}  积分</p>
			</view>
			
		</view>
		
	</view>
</view>
</template>

<script>
	//积分兑换商品组件
	export default{
		name:'intergralProduct',
		data(){
			return{
				intergralProductList:[
					{
						prodcutId:'888',
						name:'限量笔记本',
						intergral:'200',
						imageUrl:'../../static/pics/coupon.png'
					},	{
						prodcutId:'888',
						name:'限量笔记本',
						intergral:'200',
						imageUrl:'../../static/pics/coupon.png'
					},	{
						prodcutId:'888',
						name:'限量笔记本',
						intergral:'200',
						imageUrl:'../../static/pics/coupon.png'
					},	{
						prodcutId:'888',
						name:'限量笔记本',
						intergral:'200',
						imageUrl:'../../static/pics/coupon.png'
					},	{
						prodcutId:'888',
						name:'限量笔记本',
						intergral:'200',
						imageUrl:'../../static/pics/coupon.png'
					}
				]
			}
			
		},
	}
</script>

<style scoped lang="scss">
.box-intergral-product{
	font-family: PingFangSC-Regula;
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32upx 16upx;
		.title{	
			font-size: 32upx;
			font-weight: 500;
			color: #0E1117;
		}
		.more{
			font-size: 24upx;
			font-weight: 400;
			color: #919191;
		}
	}
	.content{
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		.product{
			margin:10upx 12upx 10upx 13upx;
			width: 350upx;
			height: 482upx;
			background: #FFFFFF;
			box-shadow: 0 0 8upx 0 rgba(0, 0, 0, 0.04);
			border-radius: 24upx;
			.img{
				width: 350upx;
				height: 350upx;
			}
			.info{
				padding-top:16upx;
				padding-left:24upx ;
				font-weight: 400;
				.name{
					color: #0E1117;
					font-size: 32upx;
				}
				.intergral{
					color: #735400;
					font-size: 28upx;	
				}
				
			}
		}
	}
}
	
</style>
